<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>操作手册</title>

    <link rel="stylesheet" href="../css/mui.min.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/flexible.js"></script>
    <script src="../js/vue.js"></script>
    <script type="text/javascript" src="./wode/quest.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="./text.js" type="text/javascript"></script>
    <style>
        html,
        body,
        #app {
            overflow: hidden;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            /* background-size: 100%; */
            background-color: #fff;
        }



        ::-webkit-input-placeholder {
            color: #D8E6FE;
        }

        /* Mozilla Firefox 4 to 18 */

        :-moz-placeholder {
            color: #D8E6FE;
            opacity: 1;
        }

        /* Mozilla Firefox 19+ */

        ::-moz-placeholder {
            color: #D8E6FE;
            opacity: 1;
        }

        /* Internet Explorer 10+ */

        :-ms-input-placeholder {
            color: #D8E6FE;
        }

        .mui-toast-container {
            top: 50%
        }

        .van-nav-bar__title {
            max-width: 100% !important;
        }

        .van-cell {
            display: flex;
            flex-direction: column;

        }

        .numberTit {
            font-weight: bold;

        }

        .swipeBox {
            overflow-y: auto;
        }

        .countNum {
            padding: 10px 16px;
        }

        .headerBox,
        .van-field__label {
            margin-bottom: 10px !important;
            font-size: 16px;
        }

        .van-radio__label {
            font-size: 14px;
        }

        .optionBox {
            padding: 0 .35rem;
        }

        .van-radio {
            padding: .1rem 0;
        }

        .van-radio__icon {
            font-size: 17px;
        }

        .text_box .van-cell {
            border: 1px solid rgba(0, 0, 0, .2);
        }

        .text_box .van-field__control {
            height: 100px !important;
        }

        .van-field__label {
            width: 8em;
        }

        .numberTit {
            font-weight: bold;
            color: #000;
        }

        input[type=text] {
            padding: 10px 8px;
        }

        .van-button--block {
            width: 30%;
        }

        .btn_compt {
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .foot_text p:nth-child(1) {
            font-weight: bold;
            color: #000
        }

        .foot_text p:nth-child(2) {
            font-size: 13px;
            margin: 10px 0;
            color: #000
        }
    </style>
</head>

<body>
    <div class="box" v-cloak>
        <div class="header_tit">
            <van-nav-bar title="智慧办公能力调研问卷-AI助手" left-arrow>
                <template #left>
                    <div class="back_l" @click="home"><img src="../image/left.png" alt=""></div>
                </template>
            </van-nav-bar>
        </div>
        <div class="swipeBox">
            <van-popup v-model="showPicker" round position="bottom">
                <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
            </van-popup>
            <van-form ref="form">
                <van-field maxLength="10" v-model="formData.name" placeholder="请输入姓名">
                    <template #label - extra>
                        <span class="numberTit">1. 姓名</span> <span style="color: red; ">*</span>
                    </template>
                </van-field>
                <van-field readonly v-model="formData.unit" placeholder="请选择单位" @click="showPicker = true">
                    <template #label - extra>
                        <span class="numberTit">2. 单位</span> <span style="color: red; ">*</span>
                    </template>
                </van-field>
                <div class="countNum" v-for="(item,index) in quesTionnair">
                    <div class="headTitle">
                        <div class="headerBox">
                            <span class="numberTit">{{item.id + ". " + item.name}}</span> <span
                                style="color: red; ">*</span>
                        </div>
                    </div>
                    <div class="optionBox">
                        <van-radio-group v-model="item.count">
                            <van-radio v-for="(i,v) in item.children" :name="v">{{i}}</van-radio>
                        </van-radio-group>
                    </div>
                </div>
                <div class="text_box countNum">
                    <div class="headTitle">
                        <div class="headerBox">
                            <span class="numberTit">14. 整体使用 AI助手各项能力后，您认为有哪些能力是存在优化空间的?</span> <span
                                style="color: red; ">*</span>
                        </div>
                    </div>
                    <div>
                        <van-field v-model="formData.describe" rows="2" autosize type="textarea" maxlength="500"
                            placeholder="您可以指出对您日常工作中有帮助的能力，也可以描述希望某项能力优化的方向" show-word-limit />
                    </div>
                </div>
                <div class="phoneNum">
                    <van-field v-model="formData.cellPhone" type="number" placeholder="留下您的联系方式，以便更好地为您提供服务和支持">
                        <template #label - extra>
                            <span class="numberTit">15. 联系方式</span> <span style="color: red; ">*</span>
                        </template>
                    </van-field>
                </div>
                <div class="foot_text countNum">
                    <p>问卷末说明:</p>

                    <p>您的意见对我们非常重要，我们将持续优化我们的产品与服务。感谢您的配合与支持!</p>
                </div>
                <div class="btn_compt">
                    <van-button round block type="info" @click="submit">提交</van-button>
                </div>
            </van-form>

        </div>
    </div>
</body>

<script>
    new Vue({
        el: ".box",
        data() {
            return {
                formData: {
                    name: '',
                    unit: '',
                    describe: '',
                    cellPhone: ''

                },
                quesTionnair: [],
                showPicker: false,
                columns: []

            }
        },
        created() {
            const _this = this
            let jsApiList = []
            $.getScript("../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/ , function () {
                'use strict';
                wx.ready(function () {
                    wx.onHistoryBack(() => {
                        _this.home()
                        return false
                    })
                });
                jsApiList = [
                    'previewFile',
                    'onHistoryBack',
                ];
                wx.config({
                    beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: corpid, // 必填，政务微信的cropID
                    timestamp: '1626832073', // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature, // 必填，签名，见附录1
                    jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            });
        },
        mounted() {
            this.columns = columns
            this.quesTionnair = quesTionnair
        },
        methods: {
            submit() {
                let text = ''
                if (this.validators(this.formData.name)) return mui.toast('请输入姓名', {
                    duration: 'long',
                    type: 'div'
                })
                text += this.formData.name + ","
                if (this.validators(this.formData.unit)) return mui.toast('请选择单位', {
                    duration: 'long',
                    type: 'div'
                })
                text += this.formData.unit + ","
                let allValid = true;
                
                for (const item of this.quesTionnair) {
                    if (Number(item.count) < 0 || Number(item.count) > 5) {
                        allValid = false
                        mui.toast(`请选择第${item.id}题`, {
                            duration: 'long',
                            type: 'div'
                        })
                        break;
                    }
                    text += this.convertNumberToLetter(Number(item.count)) + ','
                    //   text += item.id + this.convertNumberToLetter(Number(item.count)) + ','
                }
                if (!allValid) {
                    return
                }
                if (this.validators(this.formData.describe)) return mui.toast('请输入您的建议', {
                    duration: 'long',
                    type: 'div'
                })
                text += this.formData.describe + ","
                if (this.validator(this.formData.cellPhone)) return mui.toast('请输入正确手机号', {
                    duration: 'long',
                    type: 'div'
                })
                text += this.formData.cellPhone + ","
                // text += sm2.doEncrypt(this.formData.cellPhone, sessionStorage.getItem("bpuk"), 1)
                this.sendEmail(text)

            },
            sendEmail(text) {
                userId = sessionStorage.getItem("userId");
                if (sessionStorage.getItem("iscp_port")) {
                    iscp_port = sessionStorage.getItem("iscp_port");
                } else {
                    iscp_port = "";
                }
                let timestamp = new Date().getTime() + ""
                let data = {
                    userId: userId,
                    questionnaireResults:text,  
                    timestamp: timestamp,
                }
                data = JSON.stringify(data);
                let AuthenticationSession = sessionStorage.getItem("Authentication");
                let sign = sm3(data);
                $.ajax({
                    method: "POST", // 请求方式
                    url: localUrlLink + iscp_port + "/tjAiAssistant/question/submitResults", //请求后台地址
                    dataType: "json",
                    data: data,
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        Authentication: AuthenticationSession,
                        sign: sign,
                        timestamp: timestamp,
                    },
                    success: (res, txt, xhr) => {
                        if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                            let Authentication = xhr.getResponseHeader("Authentication")
                            if (res.code == 200) {
                                mui.toast('提交成功', {
                                duration: 'long',
                                type: 'div'
                            })
                            this.home()
                            } else {
                                mui.toast(res.resultValue, {
                                    duration: 'long',
                                    type: 'div'
                                })
                            }
                        } else {
                            mui.toast('完整性校验失败', {
                                duration: 'long',
                                type: 'div'
                            })
                        }
                    },
                    error: function (e) {
                        mui.toast("请稍后再试！", {
                            duration: 'long',
                            type: 'div'
                        })
                    },
                })
            },
            countdator(val) {
                console.log(val, 988)
                return !/^1[3-9]\d{9}$/.test(val)
            },
            validator(val) {
                console.log(val, 988)
                return !/^1[3-9]\d{9}$/.test(val)
            },
            validators(val) {
                console.log(val, 988)
                return /^\s*$/.test(val);
            },
            onConfirm(val) {
                this.showPicker = false
                this.formData.unit = val
            },
            home() {
                $(location).attr("href", "Home.html");
            },
            convertNumberToLetter(num) {
                switch (num) {
                    case 0:
                        return 'A';
                    case 1:
                        return 'B';
                    case 2:
                        return 'C';
                    case 3:
                        return 'D';
                    case 4:
                        return 'E';
                    default:
                        return null;
                }
            }
        },
    });
</script>

</html>